<template>
  <div>
    <Search
      title="添加分类"
      @click="
        model = {};
        getCategoriesList();
      "
    />
    <Table
      rowKey="cat_id"
      :loading="loading"
      :cols="cols"
      :data="list"
      :total="total"
      @change="getCategoryList"
      v-model="queryModel"
    >
      <template v-slot:delete="{ row: { cat_deleted } }">
        <i
          :style="{ color: cat_deleted ? 'red' : 'lightgreen' }"
          :class="cat_deleted ? 'el-icon-error' : 'el-icon-success'"
        />
      </template>
      <template v-slot:sort="{ row: { cat_level: level } }">
        <el-tag :type="colors[level]">{{ levels[level] }}级</el-tag>
      </template>
      <template v-slot:action="{ row }">
        <el-button
          @click="
            model = { ...row };
            getCategoriesList();
          "
          class="el-icon-edit"
          size="mini"
          type="primary"
        ></el-button>
        <el-button
          class="el-icon-delete"
          size="mini"
          type="danger"
          @click="delCategory(row)"
        ></el-button>
      </template>
    </Table>
    <DF
      :title="title + '分类'"
      ref="df"
      :opts="opts"
      :value="model"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import {
  getCategories,
  deleteCategory,
  addCategories,
  updateCategories,
} from "@/api/goods";
import { levels, colors } from "@/utils/common";
export default {
  name: "Categories",
  data() {
    return {
      levels,
      colors,
      /**
       * 列
       */
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "分类名称",
          name: "cat_name",
        },
        {
          title: "是否有效",
          slot: "delete",
        },
        {
          title: "排序",
          slot: "sort",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 200,
        },
      ],
      /**
       * 数据
       */
      list: [],
      /**
       * 总条数
       */
      total: 0,
      /**
       * loading
       */
      loading: false,
      /**
       * 查询模型
       */
      queryModel: {
        type: 3,
        pagenum: 1,
        pagesize: 10,
      },
      /**
       * 添加修改模型
       */
      model: {},
      /**
       * 分类列表
       */
      categoryList: [],
    };
  },
  methods: {
    /**
     * 提交
     */
    async confirm(model) {
      const df = this.$refs.df;
      try {
        df.start();
        model.cat_pid = model.cat_pid || [];
        const obj = {
          ...model,
          cat_pid: [...model.cat_pid].pop(),
          cat_level: model.cat_pid.length,
        };
        await (this.model.cat_id ? updateCategories : addCategories)(obj);
        this.$m.success(this.title + "成功");
        this.getCategoryList();
        df.hide();
      } catch (error) {}
      df.stop();
    },

    /**
     * 点击获取分类列表
     */
    async getCategoriesList() {
      try {
        this.categoryList = await getCategories({ type: 2 });
        this.$refs.df.show();
      } catch (error) {}
    },
    /**
     * 删除分类
     */
    async delCategory({ cat_id, cat_name }) {
      let res;
      try {
        res = await this.$confirm(`您确定要删除[${cat_name}]嘛？`);
        await deleteCategory(cat_id);
        this.$m.success("删除成功");
        this.getCategoryList();
      } catch (error) {}
      res && res();
    },
    /**
     * 获取分类列表
     */
    async getCategoryList() {
      try {
        this.loading = true;
        const { total, result } = await getCategories(this.queryModel);
        this.total = total;
        this.list = result;
      } catch (error) {}
      this.loading = false;
    },
  },
  created() {
    this.getCategoryList();
  },
  mounted() {},
  components: {},
  computed: {
    /**
     * biao
     */
    title() {
      return this.model.cat_id ? "修改" : "添加";
    },
    /**
     * 表单配置项
     */
    opts() {
      return {
        cat_name: {
          title: "分类名称",
          required: true,
          max: 20,
        },
        ...(this.model.cat_id
          ? {}
          : {
              cat_pid: {
                title: "父级分类",
                tag: "cas",
                clearable: true,
                props: {
                  checkStrictly: true,
                  label: "cat_name",
                  value: "cat_id",
                },
                value: this.categoryList,
              },
            }),
      };
    },
  },
  watch: {},
};
</script>

<style lang='scss' scoped>
</style>
